<template>
	<div>
    <n-grid :x-gap="12" :y-gap="12" :cols="3">
    <n-grid-item>
      <n-card>
        <n-statistic label="在读人数">
          <n-icon size="20">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0S96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z" fill="currentColor"></path></svg>
          </n-icon>
          {{studyStudents.studying.studying}}人
        </n-statistic>
      </n-card>
    </n-grid-item>
    <n-grid-item>
      <n-card>
        <n-statistic label="停课人数">
          <n-icon size="22">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 512"><path d="M496 224c-79.6 0-144 64.4-144 144s64.4 144 144 144s144-64.4 144-144s-64.4-144-144-144zm64 150.3c0 5.3-4.4 9.7-9.7 9.7h-60.6c-5.3 0-9.7-4.4-9.7-9.7v-76.6c0-5.3 4.4-9.7 9.7-9.7h12.6c5.3 0 9.7 4.4 9.7 9.7V352h38.3c5.3 0 9.7 4.4 9.7 9.7v12.6zM320 368c0-27.8 6.7-54.1 18.2-77.5c-8-1.5-16.2-2.5-24.6-2.5h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h347.1c-45.3-31.9-75.1-84.5-75.1-144zm-96-112c70.7 0 128-57.3 128-128S294.7 0 224 0S96 57.3 96 128s57.3 128 128 128z" fill="currentColor"></path></svg>
          </n-icon>
          {{studyStudents.stopStudying.stopStudying}}人
        </n-statistic>
      </n-card>
    </n-grid-item>
    <n-grid-item>
      <n-card>
        <n-statistic label="停学人数">
          <n-icon size="22">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 512"><path d="M633.8 458.1L389.6 269.3C433.8 244.7 464 198.1 464 144C464 64.5 399.5 0 320 0c-67.1 0-123 46.1-139 108.2L45.5 3.4C38.5-2 28.5-.8 23 6.2L3.4 31.4c-5.4 7-4.2 17 2.8 22.4l588.4 454.7c7 5.4 17 4.2 22.5-2.8l19.6-25.3c5.4-6.8 4.1-16.9-2.9-22.3zM198.4 320C124.2 320 64 380.2 64 454.4v9.6c0 26.5 21.5 48 48 48h382.2L245.8 320h-47.4z" fill="currentColor"></path></svg>
          </n-icon>
          {{studyStudents.leaveStudying.leaveStudying}}人

        </n-statistic>
      </n-card>
    </n-grid-item>
    <n-grid-item span='2'>
      <n-card>
        <teacher-class></teacher-class>
      </n-card>
    </n-grid-item>
  </n-grid>
  
		
	</div>
</template>

<script lang="ts">
import { defineComponent,inject,onMounted,reactive } from "vue";
import { GameControllerOutline, GameController } from '@vicons/ionicons5'
import teacherClass from "../components/teacherClass.vue"
import { useRefs } from "/@/core";
import { NGrid, NGridItem, NCard,NStatistic,NRow,NCol,NIcon } from "naive-ui";
// import { GameControllerOutline, GameController } from '@vicons/ionicons5'
export default defineComponent({
	components: {
		NGrid,
		NGridItem,
		NCard,
    NStatistic,
    NRow,
    NCol,
    NIcon,
    GameControllerOutline,
    GameController,
    teacherClass
	},
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

    onMounted(async ()=>{
			getStudentInfo()
		})
		const studyStudents = reactive({
			studying:'',
			leaveStudying:'',
			stopStudying:'',
		})
		const getStudentInfo =async ()=>{
			const res =await service.studentService.studentReport()
			if (res){
				studyStudents.studying = res.studying
				studyStudents.stopStudying = res.stopStudying
				studyStudents.leaveStudying = res.leaveStudying
			}			
		}
		return {
      studyStudents
    };
	}
});
</script>

<style>
.light-green {
	height: 108px;
	background-color: rgba(0, 128, 0, 0.12);
}
.green {
	height: 108px;
	background-color: rgba(0, 128, 0, 0.24);
}
</style>